
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

	<title>Layout Container</title>

	
	<LINK rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/css/style.css')}}">
	<LINK rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/Layout/css/layout-default-latest.css')}}">
	
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css" type="text/css" media="all" />
	<link type="text/css" href="{{asset('GWIT_Plateform_bootstrap/css/custom-theme/jquery-ui-1.8.16.custom.css')}}" rel="stylesheet" />
	<LINK rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/bootstrap/css/bootstrap.min.css')}}">
   	 
	<SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></SCRIPT>
	<SCRIPT type="text/javascript" src="{{asset('GWIT_Plateform_bootstrap/jquery-ui-1.8.19/js/jquery-ui.js')}}"></SCRIPT>
	<SCRIPT type="text/javascript" src="{{asset('GWIT_Plateform_bootstrap/Layout/js/jquery.layout-latest.js')}}"></SCRIPT>
	<script type="text/javascript" src="{{asset('GWIT_Plateform_bootstrap/widget_management/jquery-ui-personalized-1.6rc2.min.js')}}"></script>
	<script src="{{asset('GWIT_Plateform_bootstrap/bootstrap/js/bootstrap.js')}}"></script>
    	<script src="{{asset('GWIT_Plateform_bootstrap/bootstrap/js/application.js')}}"></script>

        <script src="{{asset('js/monitor-plugin.js')}}"></script>
        
	<script type="text/javascript">
	/**********************************  LAYOUT BODY ************************************************************/
	var layout_Outer_body = {
		name: "outerLayout_body" // NO FUNCTIONAL USE, but could be used by custom code to 'identify' a layout
		// options.defaults apply to ALL PANES - but overridden by pane-specific settings
		,north: {
			spacing_open: -1			// cosmetic spacing
			,size: 60
			,togglerLength_open: 0			// HIDE the toggler button
			,togglerLength_closed: -1			// "100%" OR -1 = full width of pane
			,resizable: false
			,slidable: false
			,override: false
			,fxName: "none"
		}
		,south: {
			spacing_open: -1			// cosmetic spacing
			,togglerLength_open: 0			// HIDE the toggler button
			,togglerLength_closed: -1			// "100%" OR -1 = full width of pane
			,resizable: false
			,slidable: false
			,override: false
			,fxName: "none"
		}
	
	};

	var layout_Outer_widget = {
		name: "outerLayout_widget" // NO FUNCTIONAL USE, but could be used by custom code to 'identify' a layout
		// options.defaults apply to ALL PANES - but overridden by pane-specific settings
		,zIndex: 0		// HANDLE BUG IN CHROME - required if using 'modal' (background mask)
		,north: {
			
			spacing_open: 0			// cosmetic spacing
			,size: 25
			,togglerLength_open: 0			// HIDE the toggler button
			,togglerLength_closed: -1			// "100%" OR -1 = full width of pane
			,resizable: false
			,slidable: false
			,override: false
			,fxName: "none"
		}
		,south: {
			spacing_open: -1			// cosmetic spacing
			,togglerLength_open: 0			// HIDE the toggler button
			,togglerLength_closed: -1			// "100%" OR -1 = full width of pane
			,resizable: false
			,slidable: false
			,override: false
			,fxName: "none"
		}
	
	};
	
	var layout_Outer_container = {
		name: "outerLayout_container" // NO FUNCTIONAL USE, but could be used by custom code to 'identify' a layout
		,resizeWithWindow:			false
		// options.defaults apply to ALL PANES - but overridden by pane-specific settings
		,north: {
			spacing_open: -1			// cosmetic spacing
			,togglerLength_open: 0			// HIDE the toggler button
			,togglerLength_closed: -1			// "100%" OR -1 = full width of pane
			,resizable: false
			,slidable: false
			,override: false
			,fxName: "none"

		}
		,west: {
			spacing_open: 0		// cosmetic spacing
			,spacing_closed:	10
			,togglerLength_open: 0			// HIDE the toggler button
			,togglerLength_closed: -0			// "100%" OR -1 = full width of pane
			,resizable: false
			,slidable: true
			,override: false
			,fxName: "slide"
   			,fxSpeed: "fast"
			,initClosed: true
			,slideTrigger_open: "mouseover"

		}
	
	};


	/***********************************************************************************************************/
	var myLayout;// a var is required because this page utilizes: myLayout.allowOverflow() method

	$(document).ready(function () {
		myLayout = $('body').layout(layout_Outer_body).allowOverflow('north');
                
		//Modification Initialisation des monitors
		$('div .container_page').each(function(){
                    $(this).layout(layout_Outer_container)
                });//layout_Outer_containe
                
		myLayoutWidget = $('div .widget').layout(layout_Outer_widget);//layout_Outer_containe
                
                /***** initialisation des éléments *******/
                
                $(window).load(function(){
                    //on initialise les bouttons previous et next
                    $("#previous-desktop").attr('class','disabled');
                    $("#previous-desktop a").html('&larr; none');
                    $("#next-desktop").attr('class', 'next');
                    $("#next-desktop a").html(listOfDesktop[0].hash+' &rarr;');
                    currentDesktop = listOfDesktop[0].hash;
                    }
                );

		$('.widget').draggable({ 
			handle: ".modal-header",
			containment: "parent",
			scroll: false
		});
		
		$('.widget').resizable({
			maxHeight: 700,
			maxWidth: 800,
			minHeight: 30,
			minWidth: 400
		});

		$('.widget').resize(function() {
			 if (myLayoutWidget) myLayoutWidget.resizeAll();
		});


		/* Minimize: Hide content of Widget */
		$('.widget .modal-header .btn-group .toggle_button').on("click", function() {
			/*var this_obj = $(this);
			var icone = this_obj.children();
			var widget_body = this_obj.parent().parent().parent().find('.widget-body');
			if(icone.hasClass('icon-minus')){
				icone.removeClass('icon-minus').addClass('icon-plus');
				//this_obj.parent().parent().parent().children('.ui-layout-center').hide();
				this_obj.parent().parent().parent().height(25);
			}else{
				icone.removeClass('icon-plus').addClass('icon-minus');
				this_obj.parent().parent().parent().height(200);
			}
			
			this_obj.find('div .ui-resizable-handle').hide();
			*/
		
		});
		/* HIDE/SHOW Widget */
		$('.widget .modal-header .btn-group .hide_button').on("click", function() {
			var this_obj = $(this);
		});

		$(".widget").on("mousedown", function() {
			$('.widget').removeClass('on_top');
			$(this).addClass('on_top');
		
		});
		
		/*************** MAIN MENU ****************/
		/* Monitor */
		$(".dropdown_button").on({
		   click:  function(){
			 $(this).toggleClass("open");
		   }
		});
		

		/* Widget */
		$(".widget_button").on({
		  click: function(){
		 	    /*Close ul*/
			   $(this).parent().toggleClass("open");
				
			
		    }
		});
		$("#widget_menu li.under_menu").on({
		  click: function(){
		 	    /*Close ul*/
			   $(this).parent().parent().toggleClass("open");
		    }
		});
		

		/* Activate/Hide widget */
		$("#widget_menu li.wiget_list a").on({
		  click: function(){
		 	  
			  $("#widget_menu li.wiget_list a div.btn").on({
		  		click: function(event){
			  		event.stopPropagation();
				}		
			  });

			/*    HIDE/SHOW widget    */
			var WidgetContainer = $('#monitor_1 .widget_zone > div');
			
			//Show Widget and put it on the front (z-index maximum)
		 	if($(this).children(".icon-ok").hasClass('icon-white')){ 
				$(this).children(".icon-ok").removeClass('icon-white');
				WidgetContainer.filter(this.hash).show();
				
			}else{//Hide Widget
				$(this).children(".icon-ok").addClass('icon-white');
				WidgetContainer.filter(this.hash).hide();
			}
			
		    }
		});
		$("#widget_menu li.wiget_list div.btn").on({
	  		click: function(event){
		  		alert('div');
			}
		});
                //Button left right du bureau
                $("#previous-desktop").on({click: function(){
                    if($("#previous-desktop").attr('class') != "disabled"){
                        //mise à jour du menu deroulant et du bureau
                        tabContainers = $('#center > div');
                        tabContainers.hide().filter(currentDesktop).show();
                        $('#monitor_menu li.monitor_page a i.icon-ok').removeClass('icon-black');
                        $('#monitor_menu li.monitor_page .icon-ok').addClass('icon-white');
                        $(currentDesktop).children(".icon-ok").removeClass('icon-white');
                        $(currentDesktop).children(".icon-ok").addClass('icon-black');

                        currentDesktop = listOfDesktop[listOfDesktop.indexOf(currentDesktop) - 1];
                        //On désactive le button si on arrive à la fin
                        if(listOfDesktop.indexOf(currentDesktop) <= 0){
                            $("#previous-desktop").attr('class','disabled');
                            $("#previous-desktop a").html('&larr; Begin');
                        }else{
                            $("#previous-desktop a").html('&larr;'+listOfDesktop[listOfDesktop.indexOf(currentDesktop) - 1].hash);
                        }
                        
                        //On active le button precédent
                        //On active le button precédent
                        if($("#next-desktop").attr('class') == "disabled"){
                            console.log("pwet");
                            $("#next-desktop").attr('class','next');
                        }
                       }
                }});
            
                $("#test").on({click: function(){
                    alert("Click marche");
                }});
                
                $("#next-desktop").on({click: function(){
                    if($("#next-desktop").attr('class') != "disabled"){
                        //mise à jour du menu deroulant et du bureau
                        tabContainers = $('#center > div');
                        tabContainers.hide().filter(currentDesktop).show();
                        $('#monitor_menu li.monitor_page a i.icon-ok').removeClass('icon-black');
                        $('#monitor_menu li.monitor_page .icon-ok').addClass('icon-white');
                        $(currentDesktop).children(".icon-ok").removeClass('icon-white');
                        $(currentDesktop).children(".icon-ok").addClass('icon-black');

                        currentDesktop = listOfDesktop[listOfDesktop.indexOf(currentDesktop) + 1];
                        //On désactive le button si on arrive à la fin
                        if(listOfDesktop.indexOf(currentDesktop) >= listOfDesktop.length - 1){
                            $("#next-desktop").attr('class','disabled');
                            $("#next-desktop a").html('End &rarr;');
                        }else{
                            $("#next-desktop a").html(listOfDesktop[listOfDesktop.indexOf(currentDesktop) + 1].hash+' &rarr;');
                        }
                        
                        //On active le button precédent
                        //On active le button precédent
                        if($("#previous-desktop").attr('class') == "disabled"){
                            console.log("pwet");
                            $("#previous-desktop").attr('class','previous');
                        }
                        $("#previous-desktop a").html('&larr;'+listOfDesktop[listOfDesktop.indexOf(currentDesktop)].hash);
                       }
                }});

		/************** MONITOR TABS**************/
		var tabContainers;
                var currentDesktop;
                //Liste des élements li
                var listOfDesktop = $.makeArray(document.getElementById('monitor_menu').getElementsByClassName('button-desktop-activate'));
                //console.log(document.getElementById('monitor_menu').getElementsByClassName('button-desktop-activate'));
                
                //Evenement sur les moniteur
		$("#monitor_menu li.monitor_page a").live("click",function(e){
			tabContainers = $('#center > div');
			tabContainers.hide().filter(this.hash).show();
			//console.log(listOfDesktop);
                        currentDesktop = this.hash;
			$('#monitor_menu li.monitor_page a i.icon-ok').removeClass('icon-black');
			$('#monitor_menu li.monitor_page .icon-ok').addClass('icon-white');
			$(this).children().children(".icon-ok").removeClass('icon-white');
			$(this).children().children(".icon-ok").addClass('icon-black');
		   }
		).filter(':first').click().click();	
	});
	</script>

</head>
<body>

<!-- HEADER APPLICATION -->
<div id="header" class="pane ui-layout-north" style="overflow:none;" >
	<div id="logo">
	</div>
	<div id="main_menu">
		
       	<div class="dropdown_button" style="position:relative;float:left">
          <button class="btn dropdown" href="#"><i class="icon-eye-open icon-black"></i> Monitors &nbsp &nbsp<span class="caret"></span></button>
          
		  <ul id="monitor_menu" class="dropdown-menu" style="font-size: 13px;text-shadow: none;width:250px;">
		    <li class="li_grey monitor_page">
			<a href="#monitor_1" class="button-desktop-activate" style="float:left;">
                            <div style="width:176px;position:relative;float:left">
                                <i class="icon-ok icon-white"></i> 
				<span style="width:500px;"> Test Code C++</span>
                            </div>
				<div style="margin-top:-3px;float:right;position:relative">
                                        <div class="btn" style="margin:3px 1px -1px 1px;padding:1px;"><i class="icon-pencil icon-black"></i></div>
					<div class="btn" style="margin:3px 1px -1px 1px;padding:1px;"><i class="icon-trash icon-black"></i></div>
				</div>
			</a>
		    </li>
		    <li class="li_grey monitor_page">
			<a href="#monitor_2" class="button-desktop-activate">
				<i class="icon-ok icon-white"></i> 
				<span> Monitor 2</span>
				<div style="float:right;display: inline;margin-top:-3px;">
					<div class="btn" style="margin:1px;padding:1px;"><i class="icon-pencil icon-black"></i></div>
					<div class="btn" style="margin:1px;padding:1px;"><i class="icon-trash icon-black"></i></div>
				</div>
			</a> 
		    </li>
		    <li class="li_grey monitor_page">
			<a href="#monitor_3" class="button-desktop-activate">
				<i class="icon-ok icon-white"></i> 
				<span> Monitor 3</span>
				<div style="float:right;display: inline;margin-top:-3px;">
					<div class="btn" style="margin:1px;padding:1px;"><i class="icon-pencil icon-black"></i></div>
					<div class="btn" style="margin:1px;padding:1px;"><i class="icon-trash icon-black"></i></div>
				</div>
			</a> 
		    </li>
		    <li class="li_grey monitor_page">
			<a href="#monitor_4" class="button-desktop-activate">
				<i class="icon-ok icon-white"></i> 
				<span> Monitor 4</span>
				<div style="float:right;display: inline;margin-top:-3px;">
					<div class="btn" style="margin:1px;padding:1px;"><i class="icon-pencil icon-black"></i></div>
					<div class="btn" style="margin:1px;padding:1px;"><i class="icon-trash icon-black"></i></div>
				</div>
			</a> 
		    </li>
		    <li class="divider"></li>
		    <li><a href="#"><i class="icon-plus"></i> New</a></li>
		    <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
		  </ul>
		 </div>



		<div style="position:relative;float:left; margin-left:20px;">
		  <button class="btn dropdown widget_button" href="#"><i class="icon-th-large icon-black"></i> Widgets &nbsp &nbsp<span class="caret"></span></button>
		  <ul id="widget_menu" class="dropdown-menu" style="font-size: 13px;text-shadow: none;width:250px;">
		    <li class="li_grey wiget_list">
			<a href="#widget_1">
				
				<i class="icon-ok"></i> 
				<span> Test Download</span>
				<div style="float:right;display: block;margin-top:-3px;">
					<div class="btn" style="margin:1px;padding:1px;"><i class="icon-pencil icon-black"></i></div>
					<div class="btn" style="margin:1px;padding:1px;"><i class="icon-trash icon-black"></i></div>
				</div>
			</a> 
		    </li>
		  
		    <li class="divider"></li>
		    <li class="under_menu"><a href="#"><i class="icon-plus"></i> Add widget</a></li>
		   
		  </ul>

                </div>

            <div style="position:relative;float:left; margin-left:20px;">
                    <ul class="pager">
                        <li class="previous" id="previous-desktop">
                            <a href="#">&larr; </a>
                        </li>
                        <li class="next" id="next-desktop">
                            <a href="#">Bureau 2 &rarr;</a>
                        </li>
                    </ul>
            </div>
     
    </div>
          
</div>

<div id="center" class="pane ui-layout-center">
	
	<div class="container_page" id="monitor_1">
		<!-- WIDGET ZONE -->
		<div class="pane ui-layout-center" style="padding:2px;">
			<div class="widget_zone" style="width:100%;height:100%">
				
				
				<div class="widget" id="widget_1" style="position:absolute;">
				   <!--   <div class="modal-header" style="margin:2px 0px;padding:2px 15px 5px 15px;background:#F5F5F5; cursor: move;">-->
					<div class="ui-layout-north modal-body modal-header" style="margin:2px 0px;padding:2px 15px 0px 15px;background:#F5F5F5; cursor: move;border:none;border-bottom:1px solid #ccc">

					<div class="btn-group" style="float:right;position:relative; margin-left:15px;">
						<button class="btn btn-mini">
							<i class="icon-trash icon-black"></i>
						</button>
					</div>
					<div class="btn-group" style="float:right;position:relative; margin-left:3px;">
						
					</div>
					<div class="btn-group" style="float:right;position:relative; margin-left:15px;">
						<button class="btn btn-mini toggle_button">
							<i class="icon-minus icon-black"></i>
						</button>
						<button class="btn btn-mini">
							<i class="icon-ok icon-black"></i>
						</button>
					</div>
					<div class="btn-group" style="float:right;position:relative; margin-left:3px;">
						<button class="btn btn-mini">
							<i class="icon-refresh icon-black"></i>
						</button>
					</div>
					
					<h4>Test Download</h4>
				      </div>
				    
				      <div class="pane ui-layout-center modal-body" style="padding:2px;border:none">
					
					<div class="widget_TopMenu">
						<div class="btn-group" style="">
							<button title="Hide widget" class="btn toggle_button">
								<i class="icon-bold icon-black"></i> Bookmakers
							</button>
							<button class="btn">
								<i class="icon-ok icon-black"></i> vcv
							</button>
						</div>					
					</div>

					<select class="span1"  style="margin:0px;padding:0px;">
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option>5</option>
					</select>
				      </div>
				</div>
			</div>
		</div><!-- WIDGET ZONE -->
		
		<div class="pane ui-layout-west" style="background-color:#F5F5F5;">
			<div class="menu_left">
				<ul class="nav nav-list">
					<li class="nav-header">Add Widgets</li>
					<li class="active"><a href="#"><i class="icon-white icon-home"></i> Odds comparator</a></li>
					<li><a href="#"><i class="icon-book"></i> Betslip</a></li>
					<li><a href="#"><i class="icon-pencil"></i> Surebets</a></li>
					<li><a href="#"><i class="icon-pencil"></i> Middles</a></li>
					<li><a href="#"><i class="icon-pencil"></i> Negative Middles</a></li>
					<li class="nav-header">Negative Middles</li>
					<li><a href="#"><i class="icon-user"></i> Profile</a></li>
					<li><a href="#"><i class="icon-cog"></i> Settings</a></li>
					<li class="divider"></li>
					<li><a href="#"><i class="icon-flag"></i> Help</a></li>
				</ul>
		 	</div>
		</div>
	</div>
	<!-- FIN TAB CONTENT -->

</div>
<!-- FOOTER APPLICATION -->
<div id="footer" class="pane ui-layout-south">
	&nbsp
</div>


</body>
</html>